<template>
  <div>
    <el-table :data="tableData" style="width: 100%" border>
            <el-table-column type="expand">
        <template #default="props">
          <el-table :data="props.row.trainings" :span-method="arraySpanMethod" style="width: 100%" border>
            <el-table-column width="180">
              <template #default="scope">
                <el-button type="text">收起</el-button>              
                </template>
            </el-table-column>
            <el-table-column prop="trainingTime" label="培训时间" width="180">
              <template #default="scope">
                {{ scope.row.trainingTime }}
              </template>
            </el-table-column>
            <el-table-column prop="trainingLocation" label="培训地点" width="180">
              <template #default="scope">
                {{ scope.row.trainingLocation }}
              </template>
            </el-table-column>
            <el-table-column prop="trainingTeacher" label="培训讲师" width="180">
              <template #default="scope">
                {{ scope.row.trainingTeacher }}
              </template>
            </el-table-column>
            <el-table-column prop="trainingCourseSummary" label="培训课程摘要" >
              <template #default="scope">
                {{ scope.row.trainingCourseSummary }}
              </template>
            </el-table-column>
            <el-table-column prop="registrationStatus" label="报名状态" width="180">
              <template #default="scope">
                {{ scope.row.registrationStatus }}
              </template>
            </el-table-column>
            <el-table-column prop="trainingStatus" label="培训状态" width="180">
              <template #default="scope">
                {{ scope.row.trainingStatus }}
              </template>
            </el-table-column>
            <el-table-column prop="trainingCourseware" label="培训课件" width="180">
              <template #default="scope">
                <a href="#" @click.prevent="downloadFile(scope.row.trainingCourseware)">{{ scope.row.trainingCourseware }}</a>
              </template>
            </el-table-column>
            <el-table-column prop="operation" label="操作" width="180">
              <template #default="scope">
                <el-button type="text" @click="handleFeedback(scope.row)">反馈问题</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="trainingTheme" label="培训主题" width="180">
      </el-table-column>
      <el-table-column prop="trainingsCount" label="培训场次" width="180">
      </el-table-column>
      <el-table-column prop="trainingTime" label="培训时间" width="180">
      </el-table-column>
      <el-table-column prop="trainingLocation" label="培训地点" width="180">
      </el-table-column>
      <el-table-column prop="trainingTeacher" label="培训讲师" width="180">
      </el-table-column>
      <el-table-column prop="trainingCourseSummary" label="培训课程摘要" width="180">
      </el-table-column>
      <el-table-column prop="registrationStatus" label="报名状态" width="180">
      </el-table-column>
      <el-table-column prop="trainingStatus" label="培训状态" width="180">
      </el-table-column>
      <el-table-column prop="trainingCourseware" label="培训课件" width="180">
        <template #default="scope">
          <a href="#" name key="" ref=" "
           @click.prevent="downloadFile(scope.row.trainingCourseware)">{{ scope.row.trainingCourseware }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="operation" label="操作" width="180">
        <template #default="scope">
          <el-button type="text" @click="handleFeedback(scope.row)">反馈问题</el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
export default {
  name: 'TrainingTable',
  data() {
    return {
      tableData: [
        {
          trainingTheme: '规划备案资料审核要求培训',
          trainingsCount: 2,
          trainings: [
            {
              trainingTime: '12-29 13:00',
              trainingLocation: '520',
              trainingTeacher: '许国伟',
              trainingCourseSummary: '针对省局规划备案内部审核要求的培训',
              registrationStatus: '已报名',
              trainingStatus: '未开始',
              trainingCourseware: '《培训课件》'
            },
            {
              trainingTime: '12-30 13:00',
              trainingLocation: '520',
              trainingTeacher: '王少楠',
              trainingCourseSummary: '针对省局规划备案内部审核要求的培训',
              registrationStatus: '已报名',
              trainingStatus: '未开始',
              trainingCourseware: '《培训课件》'
            }
          ],
          isExpanded: false
        },
        {
          trainingTheme: '关于物证机构的审核要求培训',
          trainingsCount: 3,
          trainings: [
            {
              trainingTime: '12-29 13:00',
              trainingLocation: '419',
              trainingTeacher: '许国伟',
              trainingCourseSummary: '针对省局规划备案内部审核要求的培训',
              registrationStatus: '报名审核中',
              trainingStatus: '未开始',
              trainingCourseware: '-'
            },
            {
              trainingTime: '12-29 13:00',
              trainingLocation: '111',
              trainingTeacher: '王少楠',
              trainingCourseSummary: '针对省局规划备案内部审核要求的培训',
              registrationStatus: '未报名',
              trainingStatus: '培训结束',
              trainingCourseware: '《培训课件》'
            }
          ],
          isExpanded: false
        }
      ]
    };
  },
  methods: {
    arraySpanMethod(row, column, rowIndex, columnIndex) {
      if(rowIndex===0){
        console.log(row,"合并");
        return [0, 2];
      }
    },
    handleExpandCollapse(row) {
      row.isExpanded = !row.isExpanded;
    },
    downloadFile(file) {
      // Implement file download logic here
      console.log('Downloading file:', file);
    },
    handleFeedback(row) {
      // Implement feedback logic here
      console.log('Feedback for:', row);
    }
  }
};
</script>

<style scoped>
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
</style>